<template>
	<el-button @click="clearSelection" style="margin-bottom: 5px">Clear selection</el-button>
	<el-table
		:data="tableData"
		style="width: 100%"
		border
		show-overflow-tooltip
		ref="multipleTableRef"
		@selection-change="handleSelectionChange">
		<el-table-column type="selection" width="55" :selectable="isSelectable" />
		<el-table-column label="Date">
			<template #default="{ row }">
				<div style="display: flex; align-items: center">
					<el-icon>
						<House />
					</el-icon>
					<span style="margin-left: 10px">{{ row.date }}</span>
				</div>
			</template>
		</el-table-column>
		<el-table-column label="Name">
			<template #default="{ row }">
				<el-popover effect="light" trigger="hover" placement="top" width="auto">
					<template #default>
						<div>name: {{ row.name }}</div>
						<div>address: {{ row.address }}</div>
					</template>
					<template #reference>
						<el-tag>{{ row.name }}</el-tag>
					</template>
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column label="Operations">
			<template #default="{ row }">
				<el-button size="small" @click="handleEdit(row)">Edit</el-button>
				<el-button size="small" type="danger" @click="handleDelete(row)">Delete</el-button>
			</template>
		</el-table-column>
	</el-table>
	<h1>{{ msg }} -- num is {{ num }}</h1>
	<hr />
	<div>调用store中的计算属性 基于num进行double:{{ doubleCount }}</div>
	<hr />
	<div>调用store中的计算属性 基于doubleCount方法+1:{{ doublePlusOne }}</div>
	<hr />
	<div>getter 返回一个函数:{{ getActiveUserById(1) }}</div>
	<hr />
	<div>convertTimestamp-----{{ convertTimestamp(1621939200000) }}</div>
	<hr />
	<div class="card">
		<el-button type="primary" @click="add">+</el-button>
		<el-button type="info" @click="del">-</el-button>
	</div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import { ElTable } from 'element-plus'
import { storeToRefs } from 'pinia'
import useUserStore from '@/store/modules/user'
import { convertTimestamp } from '@/utils/utils'
import type { User } from './type'
//用于定义组件的props
const props = defineProps({
	msg: {
		type: String,
		default: ''
	}
})

const store = useUserStore()
const { num, doubleCount, doublePlusOne, getActiveUserById } = storeToRefs(store)

//引入store测试效果
const add = () => store.addNum()
const del = () => store.delNum()
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const tableData: User[] = [
	{
		id: 1,
		date: '2016-05-03',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles'
	},
	{
		id: 2,
		date: '2016-05-02',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles'
	}
]
const isSelectable = (row: User) => {
	if ([1].includes(row.id!)) return true
	return false
}
const handleEdit = (row: User) => {
	console.log('编辑', row.date)
}
const handleDelete = (row: User) => {
	console.log('删除', row.name)
}
const handleSelectionChange = (val: User[]) => {
	console.log('val', val)
}
const clearSelection = (val: User[]) => {
	multipleTableRef.value!.clearSelection()
}
</script>

<style scoped lang="scss"></style>
